<template>
  <div v-if="getShow" class="modern-register-wrapper">
    <div class="modern-register-container">
      <div class="form-header">
        <h2>{{ t('sys.login.registerButton') }}</h2>
        <p>{{ t('sys.login.createAccount') }}</p>
      </div>

      <form @submit.prevent="handleRegister" class="floating-form">
        <div class="input-group">
          <a-popover
            :visible="accountValidation && !accountValidation.isValid && accountValidation.show"
            placement="right"
            trigger="manual"
            :overlay-style="{ maxWidth: '300px' }"
          >
            <template #content>
              <div class="validation-popover">
                <ExclamationCircleOutlined class="error-icon" />
                <span>{{ accountValidation?.message }}</span>
              </div>
            </template>
            <input
              id="username"
              v-model.trim="formData.account"
              type="text"
              autocomplete="off"
              @input="onAccountInput"
              @focus="handleFocus"
              @blur="handleAccountBlur"
              required
            />
          </a-popover>
          <label for="username">{{ t('sys.login.userName') }}</label>
          <span class="highlight"></span>
        </div>

        <div class="input-group">
          <a-popover
            :visible="contactValidation && !contactValidation.isValid && contactValidation.show"
            placement="right"
            trigger="manual"
            :overlay-style="{ maxWidth: '300px' }"
          >
            <template #content>
              <div class="validation-popover">
                <ExclamationCircleOutlined class="error-icon" />
                <span>{{ contactValidation?.message }}</span>
              </div>
            </template>
            <input
              id="contact"
              v-model.trim="formData.contact"
              type="text"
              autocomplete="off"
              @input="onContactInput"
              @focus="handleFocus"
              @blur="handleContactBlur"
              required
            />
          </a-popover>
          <label for="contact">{{ t('sys.login.contact') }}</label>
          <span class="highlight"></span>
        </div>

        <div class="input-group sms-input-group">
          <input
            id="verificationCode"
            v-model.trim="formData.verificationCode"
            type="text"
            autocomplete="off"
            @input="validateInput"
            @focus="handleFocus"
            @blur="handleBlur"
            required
          />
          <label for="verificationCode">{{ t('sys.login.verificationCode') }}</label>
          <span class="highlight"></span>
          <button type="button" class="sms-button" @click="sendVerificationCode" :disabled="!contactValidation?.isValid || smsCountdown > 0">
            <span v-if="smsCountdown > 0">{{ smsCountdown }}s</span>
            <span v-else>{{ t('sys.login.sendCode') }}</span>
          </button>
        </div>

        <div class="input-group">
          <a-popover
            :visible="passwordValidation.show && formData.password && formData.password.trim() !== ''"
            placement="right"
            trigger="manual"
            :overlay-style="{ maxWidth: '350px' }"
          >
            <template #content>
              <div class="password-strength-popover">
                <div class="strength-header">
                  <span>密码强度要求：</span>
                  <span class="strength-level" :class="passwordStrength.level">{{ passwordStrength.text }}</span>
                </div>
                <div class="strength-bar">
                  <div class="strength-fill" :class="passwordStrength.level"></div>
                </div>
                <div class="password-requirements">
                  <div class="requirement" :class="{ met: passwordRequirements.length }">
                    <CheckOutlined v-if="passwordRequirements.length" />
                    <CloseOutlined v-else />
                    至少6位
                  </div>
                  <div class="requirement" :class="{ met: passwordRequirements.uppercase }">
                    <CheckOutlined v-if="passwordRequirements.uppercase" />
                    <CloseOutlined v-else />
                    大写字母
                  </div>
                  <div class="requirement" :class="{ met: passwordRequirements.lowercase }">
                    <CheckOutlined v-if="passwordRequirements.lowercase" />
                    <CloseOutlined v-else />
                    小写字母
                  </div>
                  <div class="requirement" :class="{ met: passwordRequirements.number }">
                    <CheckOutlined v-if="passwordRequirements.number" />
                    <CloseOutlined v-else />
                    数字
                  </div>
                  <div class="requirement" :class="{ met: passwordRequirements.special }">
                    <CheckOutlined v-if="passwordRequirements.special" />
                    <CloseOutlined v-else />
                    特殊符号
                  </div>
                </div>
              </div>
            </template>
            <input
              id="password"
              v-model.trim="formData.password"
              :type="showPassword ? 'text' : 'password'"
              autocomplete="off"
              @input="handlePasswordInput"
              @focus="handleFocus"
              @blur="handlePasswordBlur"
              required
            />
          </a-popover>
          <label for="password">{{ t('sys.login.password') }}</label>
          <span class="highlight"></span>
          <button type="button" class="password-toggle" @click="togglePassword" :class="{ active: showPassword }">
            <EyeOutlined v-if="!showPassword" />
            <EyeInvisibleOutlined v-else />
          </button>
        </div>

        <div class="input-group">
          <a-popover
            :visible="confirmPasswordValidation && !confirmPasswordValidation.isValid && confirmPasswordValidation.show"
            placement="right"
            trigger="manual"
            :overlay-style="{ maxWidth: '300px' }"
          >
            <template #content>
              <div class="validation-popover">
                <ExclamationCircleOutlined class="error-icon" />
                <span>{{ confirmPasswordValidation?.message }}</span>
              </div>
            </template>
            <input
              id="confirmPassword"
              v-model.trim="formData.confirmPassword"
              :type="showConfirmPassword ? 'text' : 'password'"
              autocomplete="off"
              @input="onConfirmPasswordInput"
              @focus="handleFocus"
              @blur="handleConfirmPasswordBlur"
              required
            />
          </a-popover>
          <label for="confirmPassword">{{ t('sys.login.confirmPassword') }}</label>
          <span class="highlight"></span>
          <button type="button" class="password-toggle" @click="toggleConfirmPassword" :class="{ active: showConfirmPassword }">
            <EyeOutlined v-if="!showConfirmPassword" />
            <EyeInvisibleOutlined v-else />
          </button>
        </div>

        <div class="form-options">
          <label class="policy-checkbox">
            <input type="checkbox" v-model="formData.policy" />
            <span class="checkmark"></span>
            我同意回声软件
            <a href="/privacy-policy" target="_blank" rel="noopener noreferrer" style="color: #667eea; text-decoration: underline; cursor: pointer"
              >《隐私政策》</a
            >
          </label>
        </div>

        <button type="submit" class="submit-btn" :disabled="!isFormValid || loading" :class="{ loading: loading }">
          <span v-if="!loading">{{ t('sys.login.registerButton') }}</span>
          <span v-else>{{ t('sys.login.registering') }}</span>
          <LoadingOutlined v-if="loading" class="loading-icon" />
        </button>

        <div class="form-footer">
          <span>{{ t('sys.login.haveAccount') }}</span>
          <a href="#" @click.prevent="setLoginState(LoginStateEnum.LOGIN)">
            {{ t('sys.login.backSignIn') }}
          </a>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, onMounted, computed, unref, watch } from 'vue';
  import {
    EyeOutlined,
    EyeInvisibleOutlined,
    ExclamationCircleOutlined,
    LoadingOutlined,
    ArrowRightOutlined,
    CheckOutlined,
    CloseOutlined,
  } from '@ant-design/icons-vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useMessage } from '/@/hooks/web/useMessage';
  const { createMessage: $message } = useMessage();
  import { LoginStateEnum, useLoginState } from './useLogin';
  import { getCaptcha, verifyCodeEmail, register } from '/@/api/sys/user';

  const { t } = useI18n();
  const { setLoginState, getLoginState } = useLoginState();

  // 控制组件显示
  const getShow = computed(() => unref(getLoginState) === LoginStateEnum.REGISTER);

  // 表单数据
  const formData = reactive({
    account: '',
    contact: '',
    verificationCode: '',
    password: '',
    confirmPassword: '',
    policy: false,
  });

  // 状态管理
  const loading = ref(false);
  const showPassword = ref(false);
  const showConfirmPassword = ref(false);
  const smsCountdown = ref(0);

  // 验证状态 - 默认隐藏
  const accountValidation = ref<{ isValid: boolean; message: string; show: boolean } | null>(null);
  const contactValidation = ref<{ isValid: boolean; type: string | null; message: string; show: boolean } | null>(null);
  const passwordValidation = ref<{ show: boolean }>({ show: false });
  const confirmPasswordValidation = ref<{ isValid: boolean; message: string; show: boolean } | null>(null);

  // 监听 getShow（注册表单显示状态）
  watch(getShow, (show) => {
    if (show) {
      formData.account = '';
      formData.contact = '';
      formData.verificationCode = '';
      formData.password = '';
      formData.confirmPassword = '';
      formData.policy = false;
      // 如有其他字段请一并重置
    }
  });

  // 账号格式验证
  const validateAccount = (account: string) => {
    const pattern = /^[a-zA-Z][a-zA-Z0-9_]*$/;
    const isValid = pattern.test(account);
    return {
      isValid,
      message: isValid ? '账号格式正确' : '账号必须以英文字母开头，只能包含字母、数字和下划线',
      show: false,
    };
  };

  // 联系方式验证 - 智能判断
  const validateContact = (contact: string) => {
    // 判断是否为纯数字（手机号）
    const isAllNumbers = /^\d+$/.test(contact);
    // 判断是否包含@或字母（邮箱）
    const hasEmailChars = /[@a-zA-Z]/.test(contact);

    if (isAllNumbers) {
      // 纯数字按手机号验证
      const phonePattern = /^1[3-9]\d{9}$/;
      if (phonePattern.test(contact)) {
        return { isValid: true, type: 'phone', message: '手机号格式正确', show: false };
      } else {
        return { isValid: false, type: 'phone', message: '请输入有效的手机号（11位数字）', show: false };
      }
    } else if (hasEmailChars) {
      // 包含@或字母按邮箱验证
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (emailPattern.test(contact)) {
        return { isValid: true, type: 'email', message: '邮箱格式正确', show: false };
      } else {
        return { isValid: false, type: 'email', message: '请输入有效的邮箱地址', show: false };
      }
    } else {
      return { isValid: false, type: null, message: '请输入有效的手机号或邮箱地址', show: false };
    }
  };

  // 确认密码验证
  const validateConfirmPassword = (confirmPassword: string) => {
    const isValid = confirmPassword === formData.password;
    return {
      isValid,
      message: isValid ? '密码确认正确' : '两次输入的密码不一致',
      show: false,
    };
  };

  // 密码强度计算
  const passwordStrength = computed(() => {
    const password = formData.password;
    if (!password) return { level: '', text: '', score: 0 };

    let score = 0;
    const requirements = {
      length: password.length >= 6,
      uppercase: /[A-Z]/.test(password),
      lowercase: /[a-z]/.test(password),
      number: /\d/.test(password),
      special: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password),
    };

    score += requirements.length ? 1 : 0;
    score += requirements.uppercase ? 1 : 0;
    score += requirements.lowercase ? 1 : 0;
    score += requirements.number ? 1 : 0;
    score += requirements.special ? 1 : 0;

    let level = '';
    let text = '';

    if (score <= 2) {
      level = 'weak';
      text = '弱';
    } else if (score <= 3) {
      level = 'medium';
      text = '中';
    } else if (score <= 4) {
      level = 'strong';
      text = '强';
    } else {
      level = 'very-strong';
      text = '很强';
    }

    return { level, text, score, requirements };
  });

  // 密码要求状态
  const passwordRequirements = computed(() => {
    const password = formData.password;
    if (!password) return {};

    return {
      length: password.length >= 6,
      uppercase: /[A-Z]/.test(password),
      lowercase: /[a-z]/.test(password),
      number: /\d/.test(password),
      special: /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password),
    };
  });

  // 输入验证
  const validateInput = () => {
    // 只做错误提示清理
  };

  // 实时校验账号
  const onAccountInput = () => {
    accountValidation.value = validateAccount(formData.account);
    validateInput();
  };
  // 实时校验联系方式
  const onContactInput = () => {
    contactValidation.value = validateContact(formData.contact);
    validateInput();
  };
  // 实时校验确认密码
  const onConfirmPasswordInput = () => {
    confirmPasswordValidation.value = validateConfirmPassword(formData.confirmPassword);
    validateInput();
  };

  // 处理输入框焦点
  const handleFocus = (event) => {
    const input = event.target;
    const label = input.nextElementSibling;

    // 添加一些炫酷的初始效果
    label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1)';
    label.style.opacity = '1';

    // 添加轻微的弹跳效果
    setTimeout(() => {
      label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1.05)';
      setTimeout(() => {
        label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1)';
        label.classList.add('focused');
      }, 100);
    }, 50);
  };

  // 处理输入框失焦
  const handleBlur = (event) => {
    const input = event.target;
    const label = input.nextElementSibling;

    if (!input.value) {
      // 先设置初始状态（向右移出）
      label.style.transform = 'translateY(-50%) translateX(100px) rotate(15deg) scale(0.8)';
      label.style.opacity = '0';

      // 短暂延迟后播放向左移入动画
      setTimeout(() => {
        label.classList.remove('focused');
        label.style.animation = 'labelSlideIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

        // 动画结束后清除样式并添加弹跳效果
        setTimeout(() => {
          label.style.animation = '';
          label.style.transform = '';
          label.style.opacity = '';

          // 添加最终的弹跳效果
          setTimeout(() => {
            label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1.1)';
            setTimeout(() => {
              label.style.transform = 'translateY(-50%) translateX(0) rotate(0deg) scale(1)';
            }, 150);
          }, 50);
        }, 800);
      }, 50);
    }
  };

  // 处理账号失焦 - 校验失败清空输入框
  const handleAccountBlur = (event) => {
    handleBlur(event);
    if (formData.account.trim()) {
      accountValidation.value = validateAccount(formData.account);
      if (!accountValidation.value.isValid) {
        accountValidation.value.show = true;
        // 清空用户名输入框
        formData.account = '';
      }
    }
    validateInput();
  };

  // 处理联系方式失焦 - 校验失败清空输入框
  const handleContactBlur = (event) => {
    handleBlur(event);
    if (formData.contact.trim()) {
      contactValidation.value = validateContact(formData.contact);
      if (!contactValidation.value.isValid) {
        contactValidation.value.show = true;
        // 清空联系方式输入框
        formData.contact = '';
      }
    }
    validateInput();
  };

  // 处理密码输入 - 实时校验
  const handlePasswordInput = () => {
    validateInput();
    if (formData.password && formData.password.trim() !== '') {
      passwordValidation.value.show = true;
      // 如果密码强度足够（满足所有5个要求），3秒后隐藏
      if (passwordStrength.value.score >= 5) {
        setTimeout(() => {
          passwordValidation.value.show = false;
        }, 3000);
      }
    } else {
      // 密码为空时隐藏提示
      passwordValidation.value.show = false;
    }
  };

  // 处理密码失焦
  const handlePasswordBlur = (event) => {
    handleBlur(event);
    validateInput();
  };

  // 处理确认密码失焦 - 校验失败显示不清空
  const handleConfirmPasswordBlur = (event) => {
    handleBlur(event);
    if (formData.confirmPassword.trim()) {
      confirmPasswordValidation.value = validateConfirmPassword(formData.confirmPassword);
      if (!confirmPasswordValidation.value.isValid) {
        confirmPasswordValidation.value.show = true;
      }
    }
    validateInput();
  };

  // 切换密码显示
  const togglePassword = () => {
    showPassword.value = !showPassword.value;
  };

  // 切换确认密码显示
  const toggleConfirmPassword = () => {
    showConfirmPassword.value = !showConfirmPassword.value;
  };

  // 发送验证码
  const sendVerificationCode = async () => {
    if (!contactValidation.value?.isValid) {
      $message.error(t('sys.login.pleaseEnterContact'), 3);
      return;
    }

    try {
      const contactType = contactValidation.value.type;
      if (contactType === 'email') {
        await verifyCodeEmail({ email: formData.contact, model: '1', username: formData.account });
        $message.success(t('sys.login.emailCodeSent'), 3);
      } else if (contactType === 'phone') {
        await getCaptcha({ mobile: formData.contact, smsmode: '1' });
        $message.success(t('sys.login.smsCodeSent'), 3);
      } else {
        $message.error(t('sys.login.contactTypeIncorrect'));
        return;
      }

      // 开始倒计时
      smsCountdown.value = 60;
      const timer = setInterval(() => {
        smsCountdown.value--;
        if (smsCountdown.value <= 0) {
          clearInterval(timer);
        }
      }, 1000);
    } catch (error: any) {
      $message.error(error?.message || t('sys.api.networkExceptionMsg'));
    }
  };

  // 注册处理
  const handleRegister = async () => {
    // XSS 防护
    const xssPattern = /(~|\{|\}|"|'|<|>|\?)/g;
    if (xssPattern.test(formData.account) || xssPattern.test(formData.password)) {
      $message.error(t('sys.login.xssWarning'));
      return;
    }

    // 密码确认验证
    if (formData.password !== formData.confirmPassword) {
      $message.error(t('sys.login.passwordNotMatch'));
      return;
    }

    // 密码强度验证
    if (passwordStrength.value.score < 5) {
      $message.error(t('sys.login.passwordStrengthNotMet'));
      return;
    }

    try {
      loading.value = true;

      const contactType = contactValidation.value?.type;
      const registerParams = {
        username: formData.account,
        password: formData.password,
        [contactType === 'email' ? 'email' : 'phone']: formData.contact,
        smscode: formData.verificationCode,
      };

      const result = await register(registerParams);

      if (result && result.data.success) {
        $message.success(result.data.message || t('sys.api.registerMsg'), 3);

        // 注册成功后写入 sessionStorage 并跳转到登录页
        sessionStorage.setItem('register_username', formData.account);
        sessionStorage.setItem('register_password', formData.password);
        setLoginState(LoginStateEnum.LOGIN);
      } else {
        $message.error(result.data.message || t('sys.api.networkExceptionMsg'));
      }
    } catch (error: any) {
      $message.error(error?.message || t('sys.api.networkExceptionMsg'));
    } finally {
      loading.value = false;
    }
  };

  // 初始化
  onMounted(() => {
    validateInput();
  });

  const isFormValid = computed(() => {
    const hasUsername = validateAccount(formData.account).isValid;
    const hasContact = validateContact(formData.contact).isValid;
    const hasVerificationCode = formData.verificationCode.trim().length > 0;
    const hasPassword = formData.password.trim().length > 0;
    const hasConfirmPassword = formData.confirmPassword.trim().length > 0;
    const passwordsMatch = validateConfirmPassword(formData.confirmPassword).isValid;
    const hasPolicy = formData.policy;
    const isPasswordStrong = passwordStrength.value.score >= 5;

    return hasUsername && hasContact && hasVerificationCode && hasPassword && hasConfirmPassword && passwordsMatch && hasPolicy && isPasswordStrong;
  });
</script>

<style scoped lang="less">
  .modern-register-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .modern-register-container {
    width: 100%;
    max-width: 480px;
    border-radius: 24px;
    padding: 48px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    position: relative;
    z-index: 1;
    animation: fadeInUp 0.6s ease-out;

    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  .form-header {
    text-align: center;
    margin-bottom: 40px;

    h2 {
      color: #2c3e50;
      font-size: 32px;
      margin-bottom: 12px;
      font-weight: 700;
      background: linear-gradient(135deg, #667eea, #764ba2);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    p {
      color: #7f8c8d;
      font-size: 16px;
      margin: 0;
    }
  }

  .floating-form {
    .input-group {
      position: relative;
      margin-bottom: 32px;

      input {
        width: 100%;
        padding: 16px 20px;
        border: 2px solid #e1e8ed;
        border-radius: 16px;
        font-size: 16px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        background: rgba(255, 255, 255, 0.9);
        color: #2c3e50;

        &:focus {
          outline: none;
          border-color: #667eea;
          box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
          background: rgba(255, 255, 255, 1);
        }

        &:valid {
          border-color: #27ae60;
        }
      }

      label {
        position: absolute;
        left: 35px;
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        padding: 0 8px;
        color: #95a5a6;
        font-size: 18px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        pointer-events: none;
        border-radius: 4px;
        font-weight: 400;
        letter-spacing: 0.2px;

        &.focused,
        &:has(+ input:valid) {
          transform: translateY(-50%) translateX(100px) rotate(15deg) scale(0.8);
          opacity: 0;
          animation: labelSlideOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        }

        @keyframes labelSlideOut {
          0% {
            transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
            opacity: 1;
          }
          25% {
            transform: translateY(-50%) translateX(25px) rotate(-5deg) scale(1.1);
            opacity: 0.8;
          }
          50% {
            transform: translateY(-50%) translateX(50px) rotate(8deg) scale(0.9);
            opacity: 0.6;
          }
          75% {
            transform: translateY(-50%) translateX(75px) rotate(-3deg) scale(0.85);
            opacity: 0.3;
          }
          100% {
            transform: translateY(-50%) translateX(100px) rotate(15deg) scale(0.8);
            opacity: 0;
          }
        }

        @keyframes labelSlideIn {
          0% {
            transform: translateY(-50%) translateX(100px) rotate(-15deg) scale(0.8);
            opacity: 0;
          }
          60% {
            transform: translateY(-50%) translateX(15px) rotate(8deg) scale(1.2);
            opacity: 0.8;
          }
          80% {
            transform: translateY(-50%) translateX(-8px) rotate(-3deg) scale(1.1);
            opacity: 0.9;
          }
          90% {
            transform: translateY(-50%) translateX(3px) rotate(1deg) scale(1.05);
            opacity: 0.95;
          }
          100% {
            transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
            opacity: 1;
          }
        }
      }

      .password-toggle {
        position: absolute;
        right: 16px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        color: #95a5a6;
        cursor: pointer;
        padding: 8px;
        border-radius: 8px;
        transition: all 0.3s ease;

        &:hover {
          color: #667eea;
          background: rgba(102, 126, 234, 0.1);
        }

        &.active {
          color: #667eea;
        }
      }
    }
  }

  .sms-input-group {
    position: relative;

    .sms-button {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);
      background: linear-gradient(135deg, #667eea, #764ba2);
      border: none;
      color: white;
      cursor: pointer;
      padding: 8px 16px;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      transition: all 0.3s ease;

      &:hover:not(:disabled) {
        transform: translateY(-50%) scale(1.05);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
      }

      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: translateY(-50%) scale(1);
      }
    }

    input {
      padding-right: 120px !important;
    }

    label {
      z-index: 3;

      &.focused,
      &:has(+ input:valid) {
        z-index: 4;
      }
    }
  }

  .form-options {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 24px;

    .policy-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      color: #7f8c8d;
      font-size: 14px;

      input[type='checkbox'] {
        display: none;
      }

      .checkmark {
        width: 18px;
        height: 18px;
        border: 2px solid #e1e8ed;
        border-radius: 4px;
        position: relative;
        transition: all 0.3s ease;

        &::after {
          content: '✓';
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          color: white;
          font-size: 12px;
          opacity: 0;
          transition: opacity 0.3s ease;
        }
      }

      input:checked + .checkmark {
        background: #667eea;
        border-color: #667eea;

        &::after {
          opacity: 1;
        }
      }
    }
  }

  .error-message {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e74c3c;
    font-size: 14px;
    text-align: center;
    margin-bottom: 24px;
    padding: 12px 16px;
    background: rgba(231, 76, 60, 0.1);
    border-radius: 12px;
    border: 1px solid rgba(231, 76, 60, 0.2);
  }

  .submit-btn {
    width: 100%;
    padding: 16px 24px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: white;
    border: none;
    border-radius: 16px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;

    &:hover:not(:disabled) {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
    }

    &:disabled {
      opacity: 0.6;
      cursor: not-allowed;
      transform: none;
    }

    &.loading {
      .loading-icon {
        animation: spin 1s linear infinite;
      }
    }

    .arrow-icon {
      transition: transform 0.3s ease;
    }

    &:hover:not(:disabled) .arrow-icon {
      transform: translateX(4px);
    }
  }

  .form-footer {
    text-align: center;
    margin-top: 24px;
    color: #7f8c8d;
    font-size: 14px;

    a {
      color: #667eea;
      text-decoration: none;
      font-weight: 500;
      margin-left: 4px;
      transition: color 0.3s ease;

      &:hover {
        color: #5a6fd8;
        text-decoration: underline;
      }
    }
  }

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }

  // Popover 样式
  .validation-popover {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e74c3c;
    font-size: 14px;

    .error-icon {
      color: #e74c3c;
      font-size: 16px;
    }
  }

  .password-strength-popover {
    .strength-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 14px;
      font-weight: 500;

      .strength-level {
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;

        &.weak {
          background: rgba(231, 76, 60, 0.1);
          color: #e74c3c;
        }

        &.medium {
          background: rgba(243, 156, 18, 0.1);
          color: #f39c12;
        }

        &.strong {
          background: rgba(241, 196, 15, 0.1);
          color: #f1c40f;
        }

        &.very-strong {
          background: rgba(39, 174, 96, 0.1);
          color: #27ae60;
        }
      }
    }

    .strength-bar {
      width: 100%;
      height: 4px;
      background: #e1e8ed;
      border-radius: 2px;
      overflow: hidden;
      margin-bottom: 12px;

      .strength-fill {
        height: 100%;
        transition: all 0.3s ease;

        &.weak {
          width: 25%;
          background: #e74c3c;
        }

        &.medium {
          width: 50%;
          background: #f39c12;
        }

        &.strong {
          width: 75%;
          background: #f1c40f;
        }

        &.very-strong {
          width: 100%;
          background: #27ae60;
        }
      }
    }

    .password-requirements {
      display: grid;
      grid-template-columns: 1fr;
      gap: 6px;
      font-size: 12px;

      .requirement {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #95a5a6;

        &.met {
          color: #27ae60;
        }

        .anticon {
          font-size: 12px;
        }
      }
    }
  }

  // 响应式设计
  @media (max-width: 768px) {
    .modern-register-container {
      max-width: 400px;
      padding: 32px 24px;
    }

    .form-header h2 {
      font-size: 28px;
    }

    .sms-input-group {
      .sms-button {
        padding: 6px 12px;
        font-size: 12px;
      }

      input {
        padding-right: 100px !important;
      }
    }
  }

  @media (max-width: 480px) {
    .modern-register-wrapper {
      padding: 16px;
    }

    .modern-register-container {
      padding: 24px 20px;
    }

    .form-header h2 {
      font-size: 24px;
    }

    .form-header p {
      font-size: 14px;
    }

    .floating-form .input-group input {
      padding: 14px 16px;
      font-size: 14px;
    }

    .submit-btn {
      padding: 14px 20px;
      font-size: 16px;
    }
  }

  // 深色模式支持
  @media (prefers-color-scheme: dark) {
    .modern-register-container {
      background: rgba(44, 62, 80, 0.95);
      border-color: rgba(255, 255, 255, 0.1);
    }

    .form-header h2 {
      color: #ecf0f1;
    }

    .form-header p {
      color: #bdc3c7;
    }

    .floating-form .input-group input {
      background: rgba(52, 73, 94, 0.9);
      border-color: #34495e;
      color: #ecf0f1;

      &:focus {
        background: rgba(52, 73, 94, 1);
      }
    }

    .floating-form .input-group label {
      color: #bdc3c7;

      &.focused,
      &:has(+ input:valid) {
        transform: translateY(-50%) translateX(100px) rotate(15deg) scale(0.8);
        opacity: 0;
        animation: labelSlideOut 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
      }
    }

    @keyframes labelSlideIn {
      0% {
        transform: translateY(-50%) translateX(100px) rotate(-15deg) scale(0.8);
        opacity: 0;
      }
      60% {
        transform: translateY(-50%) translateX(15px) rotate(8deg) scale(1.2);
        opacity: 0.8;
      }
      80% {
        transform: translateY(-50%) translateX(-8px) rotate(-3deg) scale(1.1);
        opacity: 0.9;
      }
      90% {
        transform: translateY(-50%) translateX(3px) rotate(1deg) scale(1.05);
        opacity: 0.95;
      }
      100% {
        transform: translateY(-50%) translateX(0) rotate(0deg) scale(1);
        opacity: 1;
      }
    }

    .form-options .policy-checkbox {
      color: #bdc3c7;
    }

    .form-footer {
      color: #bdc3c7;
    }

    .sms-input-group .sms-button {
      &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }
    }
  }
</style>
